<template>
  <div ref="dataViewRef" class="app-container wh-full border">
    <div class="title_box flex-center">数据看板</div>

    <div v-resize="onResizeHandle">
      <template v-if="show">
        <ChatBox1 />
        <ChatBox2 />
        <ChatBox3 />
        <ChatBox4 />
        <ChatBox5 />
        <ChatBox6 />
        <ChatBox7 />
        <ChatBox8 />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import ChatBox1 from "./components/chat_box_1.vue";
import ChatBox2 from "./components/chat_box_2.vue";
import ChatBox3 from "./components/chat_box_3.vue";
import ChatBox4 from "./components/chat_box_4.vue";
import ChatBox5 from "./components/chat_box_5.vue";
import ChatBox6 from "./components/chat_box_6.vue";
import ChatBox7 from "./components/chat_box_7.vue";
import ChatBox8 from "./components/chat_box_8.vue";

const show = ref(false);
const dataViewRef = ref();
let timer: any;

defineOptions({
  name: "DataViewIndex",
});

function onResizeHandle() {
  timer && clearTimeout(timer);

  show.value = false;
  timer = setTimeout(() => {
    show.value = true;
  }, 500);
}

onMounted(() => {
  show.value = true;
});
</script>

<style lang="scss" scoped>
.app-container {
  background-image: url("@/assets/images/data-view-bg.jpg");

  .title_box {
    height: 5vh;
    background-image: url("@/assets/images/img_top_title_bground.png");
    background-size: 100% 100%;
    font-size: 1.5vw;
    font-weight: bold;
    color: #2ec8ed;
    line-height: 0px;
  }
}
</style>
